.btn {
    background:#777;
    color:#fff;
    font-size:14px;
    font-family: "Proxima Nova", Helvetica, sans-serif;
    border-radius:2px;
    border:none;
    padding:14px 20px;
    transition:box-shadow 500ms cubic-bezier(0.19, 1, 0.22, 1),
    border-color 500ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 200ms cubic-bezier(0.19, 1, 0.22, 1);
    cursor:pointer;
    display:inline-block;
    text-align:center;

    @each $key, $value in $applications {
        @at-root body.#{$key} #{&} {
            background: $value;

            &:hover {
                box-shadow:0 7px 24px rgba(darken($value, 20%), .2);
                transform:translateY(-1px);
            }
        }
    }

    @at-root .btn-group #{&} {
        margin:0 5px;
    }
}

.btn--white {
    background:#fff !important;
    color:#212121;
    border:1px solid #DDDDDD;

    &:hover {
        border-color:rgba(#fff, 0);
        box-shadow:0 7px 24px rgba(#777, .2) !important;
    }
}